<template>
  <div class="m-istyle">
    <dl @mouseover="over" :class="nav.class">
      <dt>{{ nav.title }}</dt>

      <dd
        v-for="item in nav.list"
        :key="item.text"
        :class="{ active: kind === item.type }"
        :data-type="item.tag"
      >
        {{ item.text }}
      </dd>
    </dl>
    <ul class="ibody">
      <li v-for="item in resultsData[kind]" :key="item.title">
        <el-card :body-style="{ padding: '0px' }" shadow="never">
          <img :src="item.image" class="image" />
          <div class="product-info cbody">
            <p class="product-title">{{ item.title }}</p>
            <p class="sub-title">
              <span>{{ item.subTitle }}</span>
            </p>
            <p class="price-number numfont price">
              <span class="price-icon">￥</span>{{ item.price }}
            </p>
          </div>
        </el-card>
      </li>
    </ul>
  </div>
</template>

<script>
import api from "../../api/index";
export default {
  data() {
    return {
      kind: "all",
      resultsData: {},
    };
  },
  created() {
    api.getResultProducts().then((res) => {
      this.resultsData = res.data.data;
    });
  },
  props: ["nav"],
  methods: {
    over(e) {
      let dom = e.target;
      let tagName = dom.tagName.toLowerCase();

      if (tagName != "dd") {
        return false;
      }
      this.kind = dom.getAttribute("data-type");
    },
  },
};
</script>
<style lang="scss">
@import "../../assets/css/index/artistic.scss";
</style>
